import { Button, Image, List, Space, Toast } from "antd-mobile";
import { isValidArr, navigateTo } from "@/utils";
import { useEffect, useState } from "react";
import { useRouter } from "next/router";
import requewt from "@/utils/requewt";
import { API } from "@/config";
import callFeedback from "@/components/common/modalFeedback";

export default function () {
  const router = useRouter();

  const [type, setType] = useState(undefined);
  const [loading, setLoading] = useState(undefined);
  const [data, setData] = useState(undefined);

  useEffect(() => {
    (async () => {
      await handler.fetch();
    })()
  }, [])

  const handler = {
    fetch: async () => {
      Toast.show({icon: 'loading', content: '加载中'})

      const resp = await requewt(API.user.price)
      Toast.clear()
      if (resp?.error_code !== 0 || resp?.msg !== `ok`) {
        callFeedback({
          title: <div dangerouslySetInnerHTML={{__html: resp?.msg || `失败!`}}>
          </div>
        })
        return
      }

      setData(resp?.data);
    },
    lottery: async () => {
      await navigateTo(`/wheel`)
    },
    portal: async () => {
      await navigateTo(`/portal`)
    },
    back: async () => {
      router.back()
    }
  }

  return (
    <>
      <div className="position-center">
        <div className="price-wrapper">
          <List className="inner" size={`small`} bordered={false}>
            {
              isValidArr(data) &&
              data.map((item, i) => {
                return (
                  <List.Item
                    key={i}
                    prefix={
                      <Image src={item.icon}
                             style={{ borderRadius: 5 }}
                             fit='cover'
                             width={40}
                             height={40}
                      />
                    }
                    description={<div dangerouslySetInnerHTML={{__html: item.content}} />}
                    // extra={<Button size={`small`} className={`act-btn act-btn-bevel`}>详情</Button>}
                  >
                    <div className="title" dangerouslySetInnerHTML={{__html: item.name}} />
                  </List.Item>
                )
              })
            }
          </List>
        </div>
      </div>

      <div className="cp-footer">
        <Button className={`act-btn act-btn-bevel`} onClick={handler.lottery}>去抽奖</Button>

        <Button className={`act-btn act-btn-bevel`} onClick={handler.portal}>返回</Button>
      </div>
    </>
  )
}